<template>
    <div>
      <div style="display: flex;justify-content: space-between;">
        <div style="width: 58%;">
          <el-card>
            <div style="display: flex;justify-content: space-between;">
              <div style="background-image: url(../../img/blue.png);width: 32%;height: 200px;background-size: 100% 100%;">
                <div style="display: flex;flex-direction: column;justify-content: center;height: 100%;width: 100%;color: #fff;">
                  <div style="margin-left: 30px;font-weight: bold;font-size: 30px;">
                    {{ statistics.todayCount }}
                  </div>
                  <div style="margin-left: 30px;font-size: 14px;">
                    今日浏览量
                  </div>
                </div>
              </div>
              <div style="background-image: url(../../img/green.png);width: 32%;height: 200px;background-size: 100% 100%;">
                <div style="display: flex;flex-direction: column;justify-content: center;height: 100%;width: 100%;color: #fff;">
                  <div style="margin-left: 30px;font-weight: bold;font-size: 30px;">
                    {{ statistics.contactWayCount }}
                  </div>
                  <div style="margin-left: 30px;font-size: 14px;">
                    今日提交联系方式
                  </div>
                </div>
              </div>
              <div style="background-image: url(../../img/red.png);width: 32%;height: 200px;background-size: 100% 100%;">
                <div style="display: flex;flex-direction: column;justify-content: center;height: 100%;width: 100%;color: #fff;">
                  <div style="margin-left: 30px;font-weight: bold;font-size: 30px;">
                    {{ statistics.thisWeekCount }}
                  </div>
                  <div style="margin-left: 30px;font-size: 14px;">
                    本周浏览量
                  </div>
                </div>
              </div>
            </div>
          </el-card>
          <el-card style="margin-top: 30px;">
            <div style="display: flex;justify-content: space-between;">
              <div style="display: flex;align-items: center;">
                <div style="height: 60%;width: 5px;background-color: #15afed;border-radius: 5px;"></div>
                <span style="margin-left: 15px;font-size: 14px;font-weight: bold;">每周浏览量数据</span>
              </div>
              <div>
                <el-select v-model="value" placeholder="Select" style="width: 100px">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </div>
            </div>
            <div id="main" style='width: 100%; height:380px'></div>
          </el-card>
        </div>
        <div style="width: 40%;height: 100%;">
          <el-card>
            <div style="display: flex;justify-content: space-between;">
              <div style="display: flex;align-items: center;">
                <div style="height: 60%;width: 5px;background-color: #15afed;border-radius: 5px;"></div>
                <span style="margin-left: 15px;font-size: 14px;font-weight: bold;">每周浏览量数据</span>
              </div>
              <div>
                <el-select v-model="value" placeholder="Select" style="width: 100px">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </div>
            </div>
            <div id="main2" style="width: 100%;height: 600px;"></div>
          </el-card>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import * as echarts from 'echarts';
  import { onMounted,ref,watch } from 'vue'
  import { $Statistics } from '../api/admin'
  onMounted(()=>{
    loadStatistics()
  })

  const loadStatistics = async()=>{
    let ret = await $Statistics()
      console.log(ret)
      if(ret.code == 0){
        statistics.value = ret.rows
        console.log('statistics',statistics.value)
        getCharts()
        getCharts2()
      }else{

      }
      
      // dataList.value = ret.rows
  }

    const statistics = ref('')
    const value1 = ref(5)
    const input = ref('')
    const value = ref('Option1')
    const options = [
      {
        value: 'Option1',
        label: '每周',
      }
    ]
  const getCharts2 =()=>{
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '本周平均值'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: false
      },
      xAxis: [
        {
          show:false,
          type: 'category',
          boundaryGap: false,
          data: statistics.value.xname
        }
      ],
      yAxis: [
        {
          show:false,
          type: 'value'
        }
      ],
      series: [
        {
          name: '',
          type: 'line',
          stack: 'Total',
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
          data: statistics.value.yvalue
        }
      ]
    };

    option && myChart.setOption(option);
  }

  const getCharts =()=>{
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    // var i = [120, 200, 150, 80, 70, 110, 130]
    // var i = statistics.value.yname
    var series = [
      {
        data: statistics.value.yvalue,
        type: 'bar',
        stack: 'a',
        name: 'a'
      },
      // {
      //   data: [30, '-', 0, 20, 10, '-', 0],
      //   type: 'bar',
      //   stack: 'b',
      //   name: 'd'
      // },
    ];
    const stackInfo = {};
    for (let i = 0; i < series[0].data.length; ++i) {
      for (let j = 0; j < series.length; ++j) {
        const stackName = series[j].stack;
        if (!stackName) {
          continue;
        }
        if (!stackInfo[stackName]) {
          stackInfo[stackName] = {
            stackStart: [],
            stackEnd: []
          };
        }
        const info = stackInfo[stackName];
        const data = series[j].data[i];
        if (data && data !== '-') {
          if (info.stackStart[i] == null) {
            info.stackStart[i] = j;
          }
          info.stackEnd[i] = j;
        }
      }
    }
    for (let i = 0; i < series.length; ++i) {
      const data = series[i].data;
      const info = stackInfo[series[i].stack];
      for (let j = 0; j < series[i].data.length; ++j) {
        // const isStart = info.stackStart[j] === i;
        const isEnd = info.stackEnd[j] === i;
        const topBorder = isEnd ? 20 : 0;
        const bottomBorder = 0;
        data[j] = {
          value: data[j],
          itemStyle: {
            borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
          }
        };
      }
    }
    option = {
      xAxis: {
        type: 'category',
        data: statistics.value.xname
      },
      yAxis: {
        type: 'value'
      },
      series: series
    };

    option && myChart.setOption(option);
  }
    
  </script>
  
  <style scoped lang="less">
  .inputDeep {
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;
      .el-input__inner {
        cursor: default !important;
      }
    }
  }
  </style>